html {
  box-sizing: border-box;
}

body {
  display: block;
  background-color: #131313;
  width: 100vw;
  height: 100%;
}

.container {
  display: block;
  overflow: hidden;
  position: relative;
  height: 800px;
  max-width: 1200px;
  margin: 20px auto;
}
.container * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 20px 12px -12px #060606;
}
@keyframes generated0 {
  100% {
    opacity: 0;
  }
}
@keyframes generated1 {
  0% {
    opacity: 0;
  }
  6.1111111111% {
    opacity: 0;
  }
  11.1111111111% {
    opacity: 1;
  }
  17.2222222222% {
    opacity: 1;
  }
  22.2222222222% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated2 {
  0% {
    opacity: 0;
  }
  17.2222222222% {
    opacity: 0;
  }
  22.2222222222% {
    opacity: 1;
  }
  28.3333333333% {
    opacity: 1;
  }
  33.3333333333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated3 {
  0% {
    opacity: 0;
  }
  28.3333333333% {
    opacity: 0;
  }
  33.3333333333% {
    opacity: 1;
  }
  39.4444444444% {
    opacity: 1;
  }
  44.4444444444% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated4 {
  0% {
    opacity: 0;
  }
  39.4444444444% {
    opacity: 0;
  }
  44.4444444444% {
    opacity: 1;
  }
  50.5555555556% {
    opacity: 1;
  }
  55.5555555556% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated5 {
  0% {
    opacity: 0;
  }
  50.5555555556% {
    opacity: 0;
  }
  55.5555555556% {
    opacity: 1;
  }
  61.6666666667% {
    opacity: 1;
  }
  66.6666666667% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated6 {
  0% {
    opacity: 0;
  }
  61.6666666667% {
    opacity: 0;
  }
  66.6666666667% {
    opacity: 1;
  }
  72.7777777778% {
    opacity: 1;
  }
  77.7777777778% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated7 {
  0% {
    opacity: 0;
  }
  72.7777777778% {
    opacity: 0;
  }
  77.7777777778% {
    opacity: 1;
  }
  83.8888888889% {
    opacity: 1;
  }
  88.8888888889% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated8 {
  0% {
    opacity: 0;
  }
  83.8888888889% {
    opacity: 0;
  }
  88.8888888889% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.container .item-1 {
  animation: generated0 45s infinite;
}
.container .item-2 {
  animation: generated1 45s infinite;
}
.container .item-3 {
  animation: generated2 45s infinite;
}
.container .item-4 {
  animation: generated3 45s infinite;
}
.container .item-5 {
  animation: generated4 45s infinite;
}
.container .item-6 {
  animation: generated5 45s infinite;
}
.container .item-7 {
  animation: generated6 45s infinite;
}
.container .item-8 {
  animation: generated7 45s infinite;
}
.container .item-9 {
  animation: generated8 45s infinite;
}